<template>
  <q-toolbar v-show="!scrollStatus.tabNavEnabled || scrollStatus.direction !== 'down'"
    color="white"
    class="text-grey-9"
    style="height: 60px"
  >
    <!--<q-btn-->
      <!--class="lt-sm"-->
      <!--flat-->
      <!--dense-->
      <!--round-->
      <!--@click="leftDrawerOpen = !leftDrawerOpen"-->
      <!--aria-label="Menu"-->
    <!--&gt;-->
      <!--<q-icon name="menu"/>-->
    <!--</q-btn>-->
    <div id="nav-menu" class="row justify-center items-center">
      <div v-if="searchInputEnabled" class="col-xl-3 col-lg-4 col-md-6 col-sm-8 col-xs-12">
        <a-search @close="disableSearchInput"></a-search>
      </div>
      <nav v-else class="title" :class="{'col-12 row items-center justify-around': $q.screen.lt.sm}">
        <router-link to="/">
          <q-btn label="首页" flat class="size-24" :color="$route.path === '/' ? 'negative' : 'black'"/>
        </router-link>
        <q-btn label="发现" to="/map/" flat class="size-24" :color="$route.path.match(/^\/map\//) ? 'negative' : 'black'"/>
        <router-link to="/topic/">
          <q-btn label="专栏" flat class="size-24" :color="$route.path.match(/^\/topic\//) ? 'negative' : 'black'"/>
        </router-link>
        <router-link to="/forum/">
          <q-btn label="讨论" flat class="size-24" :color="$route.path.match(/^\/forum\//) ? 'negative' : 'black'"/>
        </router-link>
        <router-link to="/account/">
          <q-btn label="我的" flat class="size-24" :color="$route.path.match(/^\/account\//) ? 'negative' : 'black'"/>
        </router-link>
      </nav>
    </div>
    <q-toolbar-title class="gt-sm row items-center" style="min-height: 48px">
    <router-link to="/" class="relative-position row items-center"><img src="/statics/logo-small.png"></router-link>
    </q-toolbar-title>
    <div class="row items-center gt-sm" v-if="auth">
      <q-btn v-if="!searchInputEnabled" color="grey-8" flat class="size-16" @click="enableSearchInput">
        <q-icon name="search"/>
        搜索
      </q-btn>
      <layout-header-create></layout-header-create>
      <a-notify></a-notify>
      <q-btn color="negative"
             class="q-ml-md no-shadow"
             id="user-head"
             dense
             round
             size="md"
             :style="{'background-image': 'url('+ headUrl +')!important'}">
        <div v-if="!auth.head" class=""> {{ auth.username[0].toUpperCase() }}</div>
        <q-menu>
          <q-list style="min-width: 160px" class="text-grey-8">
            <q-item v-close-popup :to="'/people/'+auth.id+'/'">
              <q-item-section>个人主页</q-item-section>
              <q-item-section side><q-icon class="size-18" name="home"/></q-item-section>
            </q-item>
            <q-item v-close-popup to="/account/settings/">
              <q-item-section>帐号设置</q-item-section>
              <q-item-section side><q-icon class="size-18" name="settings"/></q-item-section>
            </q-item>
            <q-separator />
            <q-item v-close-popup clickable @click.native="quit">
              <q-item-section>退出</q-item-section>
              <q-item-section side><q-icon class="size-18" name="exit_to_app"/></q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
    <div class="gt-sm" v-else>
      <q-btn v-if="!searchInputEnabled" color="grey-8" flat class="size-16 q-mr-sm" @click="enableSearchInput">
        <q-icon name="search"/>
        搜索
      </q-btn>
      <q-btn label="登录" color="negative" dense class="size-16 q-px-sm q-mr-md" to="/login/"/>
      <q-btn label="注册" color="grey-8" flat dense class="size-16 q-px-sm" to="/register/"/>
    </div>
  </q-toolbar>
</template>

<script>
  import LayoutHeaderCreate from './header/create'
  import { authMixin } from '../components/mixin/auth'
  import { mapState } from 'vuex'

  export default {
    name: 'LayoutHeader',
    components: { LayoutHeaderCreate },
    mixins: [authMixin],
    data () {
      return {
        scrollDirection: null,
        searchInputEnabled: false
      }
    },
    computed: {
      ...mapState(['scrollStatus', 'history']),
      headUrl () {
        const head = this.auth.head
        if (!head) {
          return ''
        } else if (head.includes('http')) {
          return head
        } else {
          return '/media/' + head
        }
      }
    },
    created () {
      this.$root.$on('search', this.onSearch)
    },
    watch: {
      '$route.path' (newValue, oldValue) {
        if (!newValue.includes('search') && oldValue.includes('search')) {
          this.disableSearchInput()
        }
      }
    },
    methods: {
      enableSearchInput () {
        this.searchInputEnabled = true
      },
      disableSearchInput () {
        this.searchInputEnabled = false

        for (const item of this.history) {
          if (item.match(/^\/search/)) {
            continue
          } else {
            this.$router.push(item)
            return
          }
        }

        // this.$router.push({ path: '/' })
      },
      onSearch (key) {
        this.searchInputEnabled = true
      }
    }
  }
</script>

<style lang="stylus">
  #nav-menu
    position absolute
    top: 0
    bottom 0
    width 100%
    justify-content center
    @media screen and (max-width 575px)
      position inherit
      width inherit
      button
        font-size 18px!important
        margin 0!important
        padding 0 10px!important
    a
      color $grey-10
  #user-head
    background-size 100% !important
    border 2px solid #ddd
</style>
